@use "sass:map";
@use '../../../design-system' as *;
@use '../../../components/automated-examples/lib/vars.module' as *;

$z-index-grid: 0;
$z-index-mouse-mask: 10000; // NOTE: Above .ag-dnd-ghost z-index of 9999
$z-index-debug-canvas: $z-index-mouse-mask + 10;
$z-index-splash: $z-index-debug-canvas + 10;
$z-index-debug-panel: $z-index-splash + 10;
$z-index-splash-contents: 10;

:global(.automated-integrated-charts-grid.ag-theme-quartz),
:global(.automated-integrated-charts-grid.ag-theme-quartz-dark) {
    position: relative;
    width: 100%;
    z-index: $z-index-grid;

    @media screen and (max-width: $breakpoint-automated-row-grouping-medium) {
        width: 200% !important;
        height: 450px !important;
        margin-bottom: calc(450px / -2 + $spacing-size-4);
        transform-origin: top left;
        transform: scale(0.5);
        overflow: hidden;

        :global(.overlay-button) {
            cursor: default;
        }
    }

    @media screen and (min-width: $breakpoint-automated-row-grouping-medium) {
        height: 450px;
    }

    @media screen and (min-width: $breakpoint-automated-row-grouping-large) {
        height: 600px;
    }

    svg[class*='logo-mark'] {
        position: absolute;
        display: block;
        width: 64px * 2;
        height: 48px * 2;
        top: 51%;
        left: 50%;
        transform: translate(-60px, -48px) scale(1.5);
        z-index: 1;
    }

    :global(.country) {
        display: flex;
        align-items: center;
        gap: $spacing-size-1;

        @media screen and (max-width: $breakpoint-automated-row-grouping-medium) {
            gap: $spacing-size-2;
        }
    }

    :global(.flag) {
        margin-right: 2px;
        margin-top: -4px;
    }

    :global(.ag-chart-menu-close) {
        color: var(--ag-foreground-color);

        &:hover {
            color: var(--ag-alpine-active-color);
        }
    }
}

.sectionHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: $spacing-size-12;

    h2 {
        margin-bottom: $spacing-size-4;
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-ultra-tight);

        @media screen and (max-width: $breakpoint-automated-row-grouping-medium) {
            font-size: var(--font-size-massive);
        }
    }

    p {
        max-width: 50em;

        @media screen and (max-width: $breakpoint-automated-row-grouping-medium) {
            font-size: var(--font-size-large);
        }
    }
}

.sectionFooter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: $spacing-size-12;
    margin-top: $spacing-size-12;

    button:not([class^='ag-']) {
        margin-left: $spacing-size-2;
    }
}

.exploreButtonOuter {
    display: none;

    @media screen and (min-width: $breakpoint-automated-row-grouping-medium) {
        display: block;
        margin-left: -80px;
    }

    @media screen and (min-width: $breakpoint-site-header-large) {
        margin-left: -100px;
    }
}

.exploreExampleButton {
    padding: 0.375em 0.5em 0.5em 0.5em;

    @media screen and (max-width: $breakpoint-automated-row-grouping-medium) {
        display: none;
    }

    @media screen and (min-width: $breakpoint-automated-row-grouping-large) {
        font-size: var(--font-size-extra-large);
    }

    :global(.icon) {
        --icon-size: 1.5em;

        margin: -1em 0 -1em 0.25em;
    }
}

.mouseMask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: $z-index-mouse-mask;
    pointer-events: none;

    // Start off hidden
    opacity: 0;

    :global(.mouse) {
        --mobile-mouse-scale: #{$mobile-grid-scale};

        position: absolute;
        top: $mouse-offset-top;
        left: $mouse-offset-left;

        @media screen and (max-width: $breakpoint-automated-row-grouping-medium) {
            top: calc(#{$mouse-offset-top} * var(--mobile-mouse-scale));
            left: calc(#{$mouse-offset-left} * var(--mobile-mouse-scale));
            width: calc(#{$mouse-base-width} * var(--mobile-mouse-scale));
            height: calc(#{$mouse-base-height} * var(--mobile-mouse-scale));
        }
    }

    // Override inline styles for 'dark-mode' automated cursor
    :global(.highlight),
    :global(.animate-click) {
        fill: var(--link-color) !important;
    }

    :global(.highlight) {
        opacity: 0.15;
    }

    :global(.animate-click) {
        transform-origin: 50% calc(50% - 1px);
        opacity: 0;
        transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
        transform: scale(0.1);
    }

    :global(.animate .animate-click) {
        opacity: 0.3;
        transform: scale(1);
    }
}
